<template>
  <div class="wapper">
    <div class="search">
      <div class="search__back iconfont" @click="handleBack">&#xe6db;</div>
      <div class="search__box">
        <span class="search__box__icon iconfont">&#xe65c;</span>
        <input
          type="text"
          class="search__box__inp"
          placeholder="请输入商品名称搜索"
          v-model="keyword"
          @change="handleInputValueEffect"
        />
      </div>
    </div>
    <shop-info
      v-for="item in searchList"
      :key="item._id"
      :item="item"
      @click="handleSearchItemClick(item)"
    />
  </div>
</template>
<script>
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import ShopInfo from "../../components/shopInfo/ShopInfo.vue";
import { get } from "../../utils/request";
const useBackRouterEffect = () => {
  const router = useRouter();
  const handleBack = () => {
    router.back();
  };
  return { handleBack };
};
const useGetSearchListEffect = () => {
  let searchList = ref([]);
  const getSearchList = async (keyword) => {
    const result = await get("api/shop/search", { keyword: keyword.value });
    if (result.data.errno === 0) {
      searchList.value = result.data.data;
    }
  };
  return { searchList, getSearchList };
};
export default {
  name: "searchList",
  components: { ShopInfo },
  setup() {
    const route = useRoute();
    const router = useRouter();
    let keyword = ref(route.query.keyword);
    const { searchList, getSearchList } = useGetSearchListEffect(keyword);
    const { handleBack } = useBackRouterEffect();
    getSearchList(keyword);
    const handleInputValueEffect = (e) => {
      keyword.value = e.target.value;
      getSearchList(keyword);
    };
    const handleSearchItemClick = (item) => {
      router.push(`/shop/${item._id}`);
    };
    return {
      handleBack,
      searchList,
      keyword,
      handleSearchItemClick,
      handleInputValueEffect,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wapper {
  padding: 0 0.18rem;
  .list {
    padding: 0;
    margin: 0;
  }
}
.search {
  display: flex;
  height: $shop-fontsize;
  margin-top: 0.16rem;
  margin-bottom: 0.04rem;
  &__back {
    width: 0.28rem;
    height: $shop-fontsize;
    line-height: $shop-fontsize;
    font-size: 0.24rem;
  }
  &__box {
    display: flex;
    height: $shop-fontsize;
    padding: 0 0.16rem;
    width: 100%;
    background-color: $search-bgColor;
    border-radius: 0.16rem;
    overflow: hidden;
    &__icon {
      display: block;
      height: $shop-fontsize;
      line-height: $shop-fontsize;
      text-align: center;
      color: #b7b7b7;
      font-size: 0.16rem;
    }
    &__inp {
      width: 100%;
      padding-left: 0.12rem;
      border: none;
      outline: none;
      background: none;
      font-size: 0.14rem;
      color: $content-fontcolor;
      &::placeholder {
        color: $content-fontcolor;
      }
    }
  }
}
</style>